<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>the-title</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: rgb(199, 237, 204);
      font: normal normal 16px 'microsoft yahei';
    }

    .container {
      width: 600px;
      height: 100%;
      margin: 0 auto;
      padding: 40px 30px;
      background-color: #ffffff;
    }

    .container input {
      display: block;
      width: 500px;
      height: 40px;
      margin-bottom: 10px;
      outline: none;
      border: 2px solid #c0c0c0;
    }

    input:focus, input:valid, input:invalid {
      transition: border-color linear .5s, -webkit-box-shadow linear .2s;
      -webkit-transition: border-color linear .5s, -webkit-box-shadow linear .2s;
    }

    input:focus {
      border-color: #009966;
    }

    input[type=email]:invalid, input[type=url]:invalid {
      border-color: #663333;
      box-shadow: 0 0 6px #663333;
      -webkit-box-shadow: 0 0 6px #663333;
    }

    input[type=email]:valid, input[type=url]:valid {
      border-color: #009966;
      box-shadow: 0 0 6px #009966;
      -webkit-box-shadow: 0 0 6px #009966;
    }
  </style>
</head>

<body>
<div class="container">
  <form action="">
    <input type="url" placeholder="请输入地址哦哦哦" required>
    <input type="url" placeholder="请输入地址哦哦哦">
    <input type="email" placeholder="请输入邮箱格式哦哦哦">
  </form>
</div>
</body>
<script src="" type="text/javascript"></script>

</html>
